<template>
    <div id="app">
        <div class="app-top">
            <top></top>
        </div>
        <div class="topimg web-inner fangda">
            <a :href="topImg.link">
                <img  :src="imgUrl+topImg.image" alt="">
            </a>
        </div>
        <div class="search web-inner">
            <div class="logo">
                <a href="#/"><img src="../../static/img/logo.png" alt=""></a>
            </div>
            <div class="search-inner">
                <input  v-model="keyword" style="padding-left: 10px;" placeholder="請輸入品牌、產品、關鍵字···" type="text">
                <div @click="goSearch">搜索</div>
            </div>
            <div>
                <router-link to="/kandeng"   class="pinpai demo">品牌刊登</router-link>
                <router-link to="/jiameng"  class="jiameng demo">加盟需求</router-link>
            </div>
        </div>
        <div class="lianjie web-inner">
                <span v-for="item in textAd">
                    <a :href="item.link" :title="item.desc">{{item.desc}}</a>
                </span>
        </div>
        <div class="menu-box" ref="menu" >
            <div class="menu"   :class="menuFixed?'fix':''">
                <div class="menu-inner web-inner">
                    <router-link :to="item.path" v-for="item in menu">{{item.title}}</router-link>
                    <router-link to="/fazhan">發展加盟</router-link>
                </div>
            </div>
        </div>
        <router-view/>
        <bottom :menu="menu"></bottom>
    </div>
</template>
<script>
    import bottom  from "../components/common-bottom"
    import top  from "../components/common-top"
    export default {
        name: 'extend',
        components:{
            bottom,
            top
        },
        data() {
            return {
                menu:[
                    {
                        title:"首頁",
                        path:"/"
                    },
                    {
                        title:"24小時加盟展",
                        path:"/jiamengzhan"
                    },
                ],
                top10News:[],
                menuFixed:false,
                topImg:"",
                bottomImg:"",
                textAd:[],
                keyword:""
            }
        },
        mounted() {
            this.getMenuDis()
            this.getBrandCategory();
            this.getImg()
        },
        methods:{
          goSearch() {
              this.$store.commit ("setKeyWord",this.keyword);
              this.$bus.$emit('searchData', 0);
              location.href="#/search"
          },
            getImg() {
                this.$http.post(this.API.get_banner_home).then((res) => {
                    let $this = this;
                if(res.status ===200 && res.data.length>0){
                    res.data.forEach((item) => {
                        if(item.location==="h1"){
                        this.topImg=item;
                    }
                    if(item.location==="h4"){
                        this.bottomImg=item;
                    }
                    if(item.location==="h6"){
                        this.textAd.push(item);
                    }
                })
                }
            })
            },
            getBrandCategory() {
                this.$http.post(this.API.get_brand_category).then((res) => {
                    let $this = this;
                if(res.status ===200 && res.data.length>0){
                    res.data.forEach((item) => {
                        item.path = "/pinpai/" + item.order
                    this.menu.push(item)
                })
                }
            })
            },
            getMenuDis() {
                let target = this.$refs.menu;
                let dis = Math.floor(target.offsetTop)-Math.floor(document.documentElement.scrollTop)
                if(dis<0){
                    this.menuFixed = true
                }else{
                    this.menuFixed = false
                }
                window.onscroll=() => {
                    let dis = Math.floor(target.offsetTop)-Math.floor(document.documentElement.scrollTop)
                    if(dis<0){
                        this.menuFixed = true
                    }else{
                        this.menuFixed = false
                    }
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    @import "../style/base";
    a{
        color: #000000;
    }
    .top{
        a{
            color: #000000;
        }
        height:50px;
        width: 100%;
        line-height: 50px;
        background-color: #333333;
        text-align: right;
        color: #ffffff;
        font-size: 16px;
        span{
            margin-left: 5px;
            margin-right: 5px;
            &:last-child{
                margin-right: 25px;
            }
            &:nth-child(2n-1){
                cursor: pointer;
                &:hover{
                    color: gray;
                }
            }
        }
    }
    .topimg{
        margin: 20px auto 20px;
        cursor: pointer;
        img{
            width: 100%;
        }
    }
    .search{
        margin: 40px auto;
        display: flex;
        justify-content: center;
        flex-direction: row;
        align-items: center;
        .logo{
            display: inline-block;
            a{
                display: inline-block;
                width: 100%;
                img{
                    width: 250px;
                }
            }

        }
        .search-inner{
            padding: 20px 20px;
            background-color: #b3b3b3;
            display: flex;
            flex-direction: row;
            vertical-align: middle;
            margin: 0 20px 0 20px;
            input{
                min-width: 250px;
                height:40px;
                line-height: 40px;
                background-color: #ffffff;
                border: none;
            }
            div{
                width: 132px;
                height: 40px;
                line-height: 40px;
                background-color: #333333;
                color: #ffffff;
                font-size: 26px;
                text-align: center;
                cursor: pointer;
            }
        }
        .demo{
            margin-right: 10px;
            display: inline-block;
            font-size: 14px;
            padding: 5px;
            border: 2px solid  #000000;
            color: #000000;
        }
    }
    .lianjie{
        margin: 0 auto 20px;
        color: #051039;
        font-size: 16px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        span{
            cursor: pointer;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 50px;
            &:last-child{
                margin-right: 0;
            }
        }
    }
    .menu-box{
        width: 100%;
        height: 60px;
    }
    .menu{
        width: 100%;
        height: 60px;
        display:flex;
        align-items: center;
        border-top: 2px solid #070707;
        border-bottom: 2px solid #070707;
        background-color: #ffffff;
        z-index: 1000000;
        &.fix{
            position: fixed;
            left: 0;
            top: 0;
        }

        a{
            &:hover{
                text-decoration: none;
            }
        }
        .menu-inner{
            text-align: left;
            height: 40px;
            line-height: 40px;
            margin:  0 auto;
            font-size: 16px;
            color: #000000;
            display: flex;
            flex-direction: row;
            align-items: center;
            a{
                color: #000000;
                padding: 0 15px;
                cursor: pointer;
                position: relative;
                text-align: center;
                &:after{
                    content: "";
                    position: absolute;
                    height:30px;
                    width: 2px;
                    background-color: #000000;
                    top: 5px;
                    right: -2px;
                }
                &:last-child:after{
                    display: none;
                }
            }
            a:hover{
                //background-color: @acolor;
                color:gray;
            }
        }
    }

</style>
